/*******************************************************************************
*
* buttons.css
*
* Файл стилей для кнопок
*
* В движке часто используются ссылки, которые должны быть сделаны как кнопки,
* встречаются и сабмиты, которые должны выглядеть красиво, в одном стиле с 
* ссылками-кнопками. 
*
* Для этого и был написан этот код.
*
* Инпут-сабмиты становятся по-умолчанию беленькими (.white), а ссылки - только
* после присвоения им класса class="linkbutton". Но просто белые кнопки - это 
* слишком скучно, потому мы сделали еще такие модификаторы:
*
* red, orange, green, black, white 
*
* Для получения белой стандартной кнопки использовать так: 
* <a href="#" class="linkbutton">default</a>
* <input type="submit" name="name" value="val"/>
*
* Для получения других цветов - попробуйте это:
* <a href="#" class="linkbutton orange">default</a>
* <input type="submit" name="name" value="val"  class="linkbutton orange"/>
*
* Как видно из примера, в класс ссылки мы дописали только модификатор, а к 
* сабмиту - класс и модификатор.
* Удачного использования :) 
*
* @package   Basic
* @author    Костя Будасов aka Amigo <k.budasov@gmail.com> 
* @copyright Игорь Будасов aka Lord <igor.budasov@gmail.com> 
*
*******************************************************************************/

/**
* Кнопка по умолчанию. Белая.
*/

.linkbutton, 
.linkbutton:link, 
.linkbutton:visited, 
INPUT[type="submit"] {
  font: bolder 14px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: 1;
  padding: 10px 11px 11px 11px;
  text-align: center;
  width: 150px;  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;

  text-decoration: none;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(top, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  color: #333;
}
  .linkbutton:hover,
  INPUT[type="submit"]:hover {
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(top, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd; 
  }

  .linkbutton:active,
  INPUT[type="submit"]:active {
    border: 1px solid #aaa;
    border-bottom: none;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 
  }

/**
* Зеленая кнопка
*/

.green, 
.green:link, 
.green:visited, 
INPUT[type="submit"].linkbutton.green {
  background-color: #7fbf4d;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #3e8804));
  background-image: -webkit-linear-gradient(top, #7fbf4d, #3e8804);
  background-image: -moz-linear-gradient(top, #7fbf4d, #3e8804);
  background-image: -ms-linear-gradient(top, #7fbf4d, #3e8804);
  background-image: -o-linear-gradient(top, #7fbf4d, #3e8804);
  background-image: linear-gradient(top, #7fbf4d, #3e8804);
  border: 1px solid #3e8804;
  -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
  -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
  box-shadow: inset 0 1px 0 0 #96ca6d;
  color: #fff;
}  

  .linkbutton.green:hover, 
  INPUT[type="submit"].linkbutton.green:hover {
    background-color: #76b347;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76b347), color-stop(100%, #5e9e2e));
    background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
    background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
    background-image: linear-gradient(top, #76b347, #5e9e2e);
    -webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
    -moz-box-shadow: inset 0 1px 0 0 #8dbf67;
    box-shadow: inset 0 1px 0 0 #8dbf67;
    text-shadow: 0 1px 0 #8dbf67;
    cursor: pointer; 
  }

  .linkbutton.green:active, 
  INPUT[type="submit"].linkbutton.green:active {
    border: 1px solid #5b992b;
    border-bottom: none;
    -webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee; 
  }

/**
* Голубая кнопка
*/

.linkbutton.blue, 
.linkbutton.blue:link, 
.linkbutton.blue:visited, 
INPUT[type="submit"].linkbutton.blue {
  background-color: #85BEF9;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #85BEF9), color-stop(100%, #5185D5));
  background-image: -webkit-linear-gradient(top, #85BEF9, #5185D5);
  background-image: -moz-linear-gradient(top, #85BEF9, #5185D5);
  background-image: -ms-linear-gradient(top, #85BEF9, #5185D5);
  background-image: -o-linear-gradient(top, #85BEF9, #5185D5);
  background-image: linear-gradient(top, #85BEF9, #5185D5);
  border: 1px solid #81baee;
  color: white;
}

  .linkbutton.blue:hover, 
  INPUT[type="submit"].linkbutton.blue:hover {
    background-color: #6798e3;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6798e3), color-stop(100%, #4c7dc8));
    background-image: -webkit-linear-gradient(top, #6798e3, #4c7dc8);
    background-image: -moz-linear-gradient(top, #6798e3, #4c7dc8);
    background-image: -ms-linear-gradient(top, #6798e3, #4c7dc8);
    background-image: -o-linear-gradient(top, #6798e3, #4c7dc8);
    background-image: linear-gradient(top, #6798e3, #4c7dc8);
    text-shadow: 0 1px 0 #81baee;
    cursor: pointer; 
  }

  .linkbutton.blue:active, 
  INPUT[type="submit"].linkbutton.blue:active {
    border: 1px solid #81baee;
    -webkit-box-shadow: inset 0 0 5px 2px #85BEF9, 0 1px 0 0 #53a5fb;
    -moz-box-shadow: inset 0 0 5px 2px #85BEF9, 0 1px 0 0 #53a5fb;
    box-shadow: inset 0 0 5px 2px #85BEF9, 0 1px 0 0 #53a5fb; 
    border-bottom: none;
  }

/**
* Оранжевая кнопка
*/

.linkbutton.orange, 
.linkbutton.orange:link, 
.linkbutton.orange:visited, 
INPUT[type="submit"].linkbutton.orange {
  background-color: #FF682A;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6b85e), color-stop(100%, #d24a12));
  background-image: -webkit-linear-gradient(top, #FF682A, #d24a12);
  background-image: -moz-linear-gradient(top, #FF682A, #d24a12);
  background-image: -ms-linear-gradient(top, #FF682A, #d24a12);
  background-image: -o-linear-gradient(top, #FF682A, #d24a12);
  background-image: linear-gradient(top, #FF682A, #d24a12);
  border: 1px solid #FF682A;
  color: white;
}

  .linkbutton.orange:hover, 
  INPUT[type="submit"].linkbutton.orange:hover {
    background-color: #e75f28;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e75f28), color-stop(100%, #d05624));
    background-image: -webkit-linear-gradient(top, #e75f28, #d05624);
    background-image: -moz-linear-gradient(top, #e75f28, #d05624);
    background-image: -ms-linear-gradient(top, #e75f28, #d05624);
    background-image: -o-linear-gradient(top, #e75f28, #d05624);
    background-image: linear-gradient(top, #e75f28, #d05624);
    border: 1px solid #d05624;
    text-shadow: 0 1px 0 #FF682A;
    cursor: pointer; 
  }

  .linkbutton.orange:active, 
  INPUT[type="submit"].linkbutton.orange:active {
    border: 1px solid #b4481c;
    border-bottom: none;
    -webkit-box-shadow: inset 0 0 5px 2px #aa5939, 0 1px 0 0 #aa5939;
    -moz-box-shadow: inset 0 0 5px 2px #aa5939, 0 1px 0 0 #aa5939;
    box-shadow: inset 0 0 5px 2px #aa4c03, 0 1px 0 0 #aa4c03; 
  }
  
/**
* Темно-серая кнопка
*/

.linkbutton.gray, 
.linkbutton.gray:link, 
.linkbutton.gray:visited, 
INPUT[type="submit"].linkbutton.gray {
  background-color: #575757;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #575757), color-stop(100%, #3b3b3b));
  background-image: -webkit-linear-gradient(top, #575757, #3b3b3b);
  background-image: -moz-linear-gradient(top, #575757, #3b3b3b);
  background-image: -ms-linear-gradient(top, #575757, #3b3b3b);
  background-image: -o-linear-gradient(top, #575757, #3b3b3b);
  background-image: linear-gradient(top, #575757, #3b3b3b);
  border: 1px solid #2c2c2c;
  color: white;
}

  .linkbutton.gray:hover, 
  INPUT[type="submit"].linkbutton.gray:hover {
    background-color: #3c3c3c;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #252525));
    background-image: -webkit-linear-gradient(top, #3c3c3c, #252525);
    background-image: -moz-linear-gradient(top, #3c3c3c, #252525);
    background-image: -ms-linear-gradient(top, #3c3c3c, #252525);
    background-image: -o-linear-gradient(top, #3c3c3c, #252525);
    background-image: linear-gradient(top, #3c3c3c, #252525);
    border: 1px solid #2c2c2c;
    cursor: pointer; 
  }

  .linkbutton.gray:active, 
  INPUT[type="submit"].linkbutton.gray:active {
    border: 1px solid #aaa;
    border-bottom: none;
    -webkit-box-shadow: inset 0 0 5px 2px #1d1d1d, 0 1px 0 0 #575757;
    -moz-box-shadow: inset 0 0 5px 2px #1d1d1d, 0 1px 0 0 #575757;
    box-shadow: inset 0 0 5px 2px #1d1d1d, 0 1px 0 0 #575757; 
  }

/**
* Яростно-красная кнопка
*/

.linkbutton.red, 
.linkbutton.red:link, 
.linkbutton.red:visited, 
INPUT[type="submit"].linkbutton.red {
    background-color: #fc1818;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc1818), color-stop(100%, #d21010));
    background-image: -webkit-linear-gradient(top, #fc1818, #d21010);
    background-image: -moz-linear-gradient(top, #fc1818, #d21010);
    background-image: -ms-linear-gradient(top, #fc1818, #d21010);
    background-image: -o-linear-gradient(top, #fc1818, #d21010);
    background-image: linear-gradient(top, #fc1818, #d21010);
    border: 1px solid #df3939;
    color: white;
    box-shadow: inset 0 0 5px 2px transparent, 0 1px 0 0 transparent; 
    }

    .linkbutton.red:hover, 
    INPUT[type="submit"].linkbutton.red:hover {
      background-color: #d21414;
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d21414), color-stop(100%, #c21717));
      background-image: -webkit-linear-gradient(top, #d21414, #c21717);
      background-image: -moz-linear-gradient(top, #d21414, #c21717);
      background-image: -ms-linear-gradient(top, #d21414, #c21717);
      background-image: -o-linear-gradient(top, #d21414, #c21717);
      background-image: linear-gradient(top, #d21414, #c21717);
      border: 1px solid #df3939;
      text-shadow: 0 1px 0 #df3939;
      cursor: pointer; 
    }

    .linkbutton.red:active, 
    INPUT[type="submit"].linkbutton.red:active {
      border: 1px solid transparent;
      -webkit-box-shadow: inset 0 0 5px 2px #991212, 0 1px 0 0 #fc1818;
      -moz-box-shadow: inset 0 0 5px 2px #991212, 0 1px 0 0 #fc1818;
      box-shadow: inset 0 0 5px 1px #991212, 0 1px 0 0 #fc1818; 
    }
